<div class="dashboard-navigation">

    <adf-sidebar-action-menu [title]="'APP.HOME.NEW_MENU.LABEL' | translate" [expanded]="(expanded$ | async)" class="dashboard-navigation__section dashboard-navigation__section--new"
        [ngClass]="{ 'section--new--mini': !(expanded$ | async) }">
        <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
        <div sidebar-menu-expand-icon>
            <mat-icon>add_box</mat-icon>
        </div>
        <div sidebar-menu-options>
            <button mat-menu-item (click)="openProjectDialog()">
                <mat-icon>create_new_folder</mat-icon>
                <span>{{ 'APP.HOME.NEW_MENU.MENU_ITEMS.CREATE_PROJECT' | translate }}</span>
            </button>
            <button mat-menu-item (click)="onClick($event)" class="app-upload-btn">
                <mat-icon>file_upload</mat-icon>
                <span>{{ 'APP.HOME.NEW_MENU.MENU_ITEMS.UPLOAD_PROJECT' | translate }}</span>
            </button>
            <input type="file" #fileInput (click)="$event.stopPropagation()" (change)="onUpload($event.target.files)" accept="application/zip,application/x-zip,application/x-zip-compressed"
            class="ama-upload-button" />
        </div>
    </adf-sidebar-action-menu>

    <div class="dashboard-navigation__section dashboard-navigation__section--menu" *ngFor="let list of navigation">
        <ul class="dashboard-navigation-menu">
            <li *ngFor="let item of list" class="dashboard-navigation-menu__item"
                routerLinkActive
                #rla="routerLinkActive"
                title="{{ item.title || '' | translate }}">

                <button [routerLink]="item.route.url" [color]="rla.isActive ? 'accent': 'primary'" mat-icon-button mat-ripple matRippleColor="primary"
                    [matRippleTrigger]="rippleTrigger" [matRippleCentered]="true">

                    <mat-icon>{{ item.icon }}</mat-icon>
                </button>

                <span #rippleTrigger class="menu__item--label" [routerLink]="item.route.url" [hidden]="!(expanded$ | async)" [ngClass]="{
                        'menu__item--active': rla.isActive,
                        'menu__item--default': !rla.isActive
                    }">{{ item.label | translate }}</span>
            </li>
        </ul>
    </div>
</div>
